import { Avatar, Toast } from 'antd-mobile'
import { useStreams } from '@/lib/utils'
import { native } from '@/mobile/app-native'
import { ReactComponent as RefreshIcon } from '@/mobile/assets/refresh.svg'
import { ReactComponent as RightIcon } from '@/mobile/assets/right.svg'
import { ReactComponent as SettingIcon } from '@/mobile/assets/setting.svg'
import { flexCol, ellipsis } from '@/mobile/styles'
import services from '@/services'
import { type QywxStatusInfo } from '@/services/qywxs'
import { NoQywxNotice } from './no-qywx-notice'

export function Mine() {
  const [account, qywxMap] = useStreams(services.auth.account$, services.qywxs.alives)
  const qywxs = useMemo(() => [...qywxMap.values()], [qywxMap])

  async function reload() {
    const toast = Toast.show({
      icon: 'loading',
      content: '加载中...',
      duration: 0,
    })
    await services.qywxs.loadQywxs()
    toast.close()
  }

  return <div css={s.wrap}>
    {account ? (
      <header css={s.account}>
        <div className="inner" onClick={() => native.goAccount()}>
          <Avatar src={account.avatar} />
          <div className="info">
            <div className="name">{account.name}</div>
            {account.phone ? <div className="phone">手机：{account.phone}</div> : null}
          </div>
          <RightIcon />
        </div>
      </header>
    ) : null}

    <div css={s.qywxs}>
      <header>
        <h2>已登录的企业微信</h2>
        <RefreshIcon onClick={reload} />
        {native.inNative ? <SettingIcon onClick={() => native.goSetNetwork()} /> : null}
      </header>

      {!qywxs.length ? <NoQywxNotice marginTop="2vh" /> : null}

      <main>{qywxs.map(qywx => <QywxItem key={qywx.wxid} qywx={qywx} />)}</main>
    </div>
  </div>
}

function QywxItem({ qywx }: { qywx: QywxStatusInfo }) {
  return <div css={s.qywx}>
    <Avatar src={qywx.avatar} lazy />
    <div className="info">
      <div className="name">{qywx.friendlyName}</div>
      <div className="corpname">{qywx.corpname}</div>
    </div>
  </div>
}

const s = {
  wrap: css`
    ${flexCol};
    flex: 1;
    overflow: hidden;
  `,
  account: css`
    background-color: #f4f6f9;
    padding: 34px 0 20px;
    .inner {
      align-items: center;
      display: flex;
      padding: 10px 16px;
    }
    .adm-image {
      --border-radius: 100px;
      --size: 61px;
      margin-right: 16px;
    }
    .info {
      flex: 1;
      margin-right: 16px;
      overflow: hidden;
    }
    .name {
      ${ellipsis};
      color: #000;
      font-size: 20px;
    }
    .phone {
      ${ellipsis};
      color: rgba(0, 0, 0, 0.28);
      font-size: 14px;
      margin-top: 2px;
    }
  `,

  qywxs: css`
    ${flexCol};
    flex: 1;
    overflow: hidden;
    padding: 30px 16px 0;
    & > header {
      align-items: center;
      display: flex;
      padding-bottom: 20px;
      h2 {
        color: rgba(0, 0, 0, 0.88);
        flex: 1;
        font-size: 16px;
        font-weight: normal;
        margin: 0;
      }
      svg {
        height: 24px;
        margin-left: 16px;
        width: 24px;
      }
    }
    & > main {
      flex: 1;
      overflow-y: auto;
    }
  `,

  qywx: css`
    align-items: center;
    display: flex;
    padding: 10px 0;
    .adm-image {
      --border-radius: 100px;
      --size: 50px;
      margin-right: 12px;
      flex-shrink: 0;
    }
    .info {
      ${flexCol};
      align-items: flex-start;
      flex: 1;
      overflow: hidden;
      row-gap: 6px;
    }
    .name {
      ${ellipsis};
      color: #000;
      font-size: 16px;
      max-width: 100%;
    }
    .corpname {
      ${ellipsis};
      background-color: #e5eeff;
      border-radius: 4px;
      box-sizing: border-box;
      color: #407fff;
      font-size: 12px;
      line-height: 1;
      max-width: 100%;
      padding: 3px 10px;
    }
  `,
}
